<template>
    <div class="goods">
        <header>商品管理</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="market_type">
                        <span>所属门店：</span>
                        <el-select :disabled="disA" v-model="value1" placeholder="请选择" style="width:300px;" @change="getGoodsType()">
                            <el-option v-for="item in options1" :key="item.COMPID" :label="item.label" :value="item.SHOPNAME">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="status">
                        <span>分类：</span>
                        <el-select v-model="value2" placeholder="请选择" style="width:300px;" @change="getTypeId()">
                            <el-option v-for="item in options3" :key="item.value" :label="item.TYPENAME" :value="item.TYPENAME">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="danger" style="background:#e7251a;" @click="searchGoods">查询</el-button>
                </div>
                <div class="condition_2">
                    <div class="keywords">
                        <span>商品名称：</span>
                        <el-input v-model.trim="input1" placeholder="请输入" style="width:300px;"></el-input>
                    </div>
                </div>
                <div class="add_market">
                    <div class="btn_left">
                        <el-button type="danger" style="background:#e7251a;" @click.native="goAdd">新增商品</el-button>
                        <el-button @click="goodsSelectUpDown(1)">批量上架</el-button>
                        <el-button @click="goodsSelectUpDown(0)">批量下架</el-button>
                        <el-button @click="goodsSelectCopy()">批量复制</el-button>
                    </div>
                    <div class="btn_right">
                        <el-button type="danger" style="background:#e7251a;" @click="goGoodsClassify">商品分类</el-button>
                    </div>
                </div>
                <div class="selected" v-if="selectArr.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="tables">
                    <el-table :data="tableDatas" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">
                        <el-table-column type="selection" width="50">
                        </el-table-column>
                        <el-table-column prop="SERVNAME" label="商品名称" width="200">
                        </el-table-column>
                        <el-table-column prop="SHOPNAME" label="门店名称" width="250">
                        </el-table-column>
                        <el-table-column prop="CLASSNAME" label="分类" width="100">
                        </el-table-column>
                        <el-table-column prop="SPECSS" label="规格" width="100">
                        </el-table-column>
                        <el-table-column prop="APPPRICE" label="App售价" width="100">
                        </el-table-column>
                        <el-table-column prop="PADPRICE" label="Pad售价" width="100">
                        </el-table-column>
                        <el-table-column prop="STATUS" label="状态" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.STATUS==1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/dot_green.png" width="16" heigth="16" alt="" />上架
                                </span>
                                <span v-if="scope.row.STATUS!=1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/dot_red.png" width="16" heigth="16" alt="" />下架
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SUPPNORCASHVOL" label="满减券" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.SUPPCASHVOL==1">
                                    <img src="../../assets/images/market/right.png" width="32" heigth="32" alt="" />
                                </span>
                                <span v-if="scope.row.SUPPCASHVOL!=1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/error.png" width="32" heigth="32" alt="" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SUPPCASHVOL" label="N元券" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.SUPPNORCASHVOL==1">
                                    <img src="../../assets/images/market/right.png" width="32" heigth="32" alt="" />
                                </span>
                                <span v-if="scope.row.SUPPNORCASHVOL!=1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/error.png" width="32" heigth="32" alt="" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SUPPDISCASHVOL" label="折扣券" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.SUPPDISCASHVOL==1">
                                    <img src="../../assets/images/market/right.png" width="32" heigth="32" alt="" />
                                </span>
                                <span v-if="scope.row.SUPPDISCASHVOL!=1" style="display:flex;align-items:center;justify-content:center;">
                                    <img src="../../assets/images/market/error.png" width="32" heigth="32" alt="" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="STATUS" label="操作" width="200">
                            <template slot-scope="scope">
                                <span class="editStatus" @click="goodsUpDown(scope.row.SERVID,scope.row.STATUS)">{{scope.row.STATUS==1 ? '下架' : '上架'}}</span>
                                <span class="edits" @click="goodsCopy(scope.row.COMPID,scope.row.SERVID)">复制</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[6, 12, 18]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="goodsCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getCafeList,
    copyServDetail,
    getSelectShop,
    getSelectCafeType,
    cafeUptoDown
} from "@/api/manages";
import { asyncRouterMap } from '@/router/index'
import { setCookie, getCookie } from '@/assets/js/cookie'
export default {
    name: "goods",
    data() {
        return {
            value1: "", //所属门店
            compID: "", // 当前门店ID
            typeID: "", // 商品分类ID
            value2: "", //分类
            value3: "", //门店
            input1: "", //商品名称
            loading: true,
            options1: [], // 门店下拉列表
            options2: [], // 商品分类
            tableDatas: [], // 商品列表数据
            goodsCount: 0, // 商品总数量
            currentPage: 1, // 当前页数
            pageSize: 6, // 页面条目数量
            selectArr: [], //已选择的数组集合
            selectFlag: false, // 是否进行多选
            defaultSearch: true, //是否开启默认搜索
            typeAll: [{ CAFETYPE: "", TYPENAME: "全部" }], //默认的全部选项
            arr_one: [],
            arr_two: [],
            str_one: '', //一级菜单字符串
            str_two: '', //二级菜单字符串
            disA: false, //下拉框是否禁用
        };
    },
    computed: {
        selectGoodsId() {
            let selectId = [];
            this.selectArr.forEach(item => {
                selectId.push(item.SERVID);
            });
            return selectId;
        },
        options3() {
            return this.typeAll.concat(this.options2);
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.selectArr = val;
            console.log(val);
        },
        // 选择当前页面数目
        handleSizeChange(val) {
            // 存储条目数
            this.pageSize = val;
            // 调用跳转方法重新获取数据
            this.handleCurrentChange(this.currentPage);
        },
        // 跳转分页
        handleCurrentChange(val) {
            // 存储当前页数
            this.currentPage = val;

            // 打开 loading
            this.loading = true;

            // 获取商品列表
            this.getGoodsList({
                COMPID: this.compID,
                CAFETYPE: this.typeID,
                SERVNAME: this.input1,
                PAGE_NO: val,
                PAGE_SIZE: this.pageSize
            });
        },
        //新增商品
        goAdd() {
            this.$router.push({ path: "/manages/addGoods" });
        },
        //商品分类
        goGoodsClassify() {
            this.$router.push({ path: "/manages/goodsClassify" });
        },
        // 获取商品分类下拉列表
        getGoodsType() {
            // 获取选择的当前门店ID
            this.options1.forEach(item => {
                if (item.SHOPNAME === this.value1) {
                    this.compID = item.COMPID;
                }
            });
            this.options2 = "";
            this.value2 = "";
            getSelectCafeType({
                PAGE_NO: "1",
                PAGE_SIZE: "6",
                COMPID: this.compID
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.options2 = res.data.CAFETYPEARR;
                    if (this.options2.length > 0) {
                        this.typeID = this.options2[0].CAFETYPE;
                        this.value2 = this.options2[0].TYPENAME;
                    }
                    if (this.defaultSearch) {
                        this.selectSearch();
                        this.defaultSearch = false;
                    }
                }
            });
        },
        getTypeId() {
            // 获取选择的当前商品分类ID
            this.options3.forEach(item => {
                if (item.TYPENAME === this.value2) {
                    this.typeID = item.CAFETYPE;
                    return;
                }
            });
        },
        // 获取商品列表
        getGoodsList(query) {
            this.loading = true;
            getCafeList(query).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.tableDatas = res.data.CAFEARR;
                    this.goodsCount = res.data.COUNT;
                    this.loading = false;
                }
            });
        },
        // 查询商品
        searchGoods() {
            let param = {
                COMPID: this.compID, // 门店ID
                CAFETYPE: this.typeID, // 分类ID
                SERVNAME: this.input1, // 商品名称
                PAGE_NO: this.currentPage, // 当前页码
                PAGE_SIZE: this.pageSize // 当前页条目数
            };
            this.getGoodsList(param);
            this.selectFlag = true;
        },
        // 商品上下架
        goodsUpDown(goodsID, status) {
            // 商品状态码取反
            let curStatus = Number(!status);

            cafeUptoDown({
                SERVIDS: goodsID,
                STATUS: curStatus
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.tableDatas.forEach(item => {
                        if (item.SERVID === goodsID) {
                            item.STATUS = curStatus;
                            this.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            return;
                        }
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
        // 商品复制
        goodsCopy(compID, goodsID) {
            copyServDetail({
                COMPIDS: compID,
                SERVIDS: goodsID
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    this.searchGoods();
                    this.$message({
                        message: "复制成功",
                        type: "success"
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
        // 商品批量上下架
        goodsSelectUpDown(status) {
            // 在选择门店、分类、和商品后才能使用
            if (this.compID === "") {
                this.$alert("请选择门店", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.typeID === "") {
                this.$alert("请选择分类", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (!this.selectFlag) {
                this.$alert("请搜索指定分类", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.selectArr.length === 0) {
                this.$alert("请选择商品", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }

            cafeUptoDown({
                SERVIDS: this.selectGoodsId.join(),
                STATUS: status
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    // 更新本地数据
                    this.tableDatas.forEach((item, index) => {                    	
                        if (item.SERVID === this.selectGoodsId[index]) {
                            item.STATUS = status;
                            this.$message({
                                message: "批量操作成功",
                                type: "success"
                            });
                            return;
                        }
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
        // 商品批量复制
        goodsSelectCopy() {
            // 在选择门店、分类、和商品后才能使用
            if (this.compID === "") {
                this.$alert("请选择门店", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.typeID === "") {
                this.$alert("请选择分类", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            if (this.selectArr.length === 0) {
                this.$alert("请选择商品", "提示", {
                    confirmButtonText: "确定"
                });
                return;
            }
            copyServDetail({
                COMPIDS: this.compID,
                SERVIDS: this.selectGoodsId.join()
            }).then(res => {
                if (res.data.STATUS_CODE === 1) {
                    // 更新数据
                    this.searchGoods();
                    this.$message({
                        message: "批量操作成功",
                        type: "success"
                    });
                } else {
                    this.$alert("未知错误，请刷新试试", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
        // 默认搜索指定数据
        selectSearch() {
            this.getGoodsList({
                PAGE_NO: 1,
                PAGE_SIZE: 6,
                COMPID: this.options1[1].COMPID,
                CAFETYPE: this.options2[0].CAFETYPE
            });
        }
    },
    created() {
    	let self = this;
    	/* ----------权限管理---------- */
            if(getCookie('compId') !== 0) {
            	this.disA = true;                                
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {                    
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');                    
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {
                    	console.log(0);
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------                    
                })
            }
            /* ----------权限管理---------- */
        //载入时获取门店下拉列表数据
        getSelectShop({
            LIKESTR: "",
            PAGE_NO: "1",
            PAGE_SIZE: "100"
        }).then(res => {
            if (res.data.STATUS_CODE === 1) {
                this.options1 = res.data.SHOPARR;                              
                if(getCookie('compId')){
                	this.compID = getCookie('compId');
                	this.options1.forEach((v) => {
                		if(v.COMPID === getCookie('compId')){
                			self.value1 = v.SHOPNAME;
                		}
                	})
                }else{
                	this.value1 = this.options1[0].SHOPNAME;
                	this.compID = this.options1[0].COMPID;
                }                
                this.getGoodsType();
                //this.searchGoods();
            }
        });
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.goods {
    header {
        background: #fff;
        font-size: 22px;
        font-weight: 700;
        padding: 20px;
    }
    .contents {
        width: 97%;
        margin: 25px auto;
        padding: 25px;
        background: #fff;
        .conditions {
            span {
                white-space: nowrap;
            }
            .condition_1 {
                display: flex;
                .status {
                    margin: 0 35px;
                }
            }
            .condition_2 {
                display: flex;
                margin: 20px 0;
                .keywords {
                    display: flex;
                    align-items: center;
                    .el-input {
                        margin-left: 5px;
                    }
                }
            }
            .add_market {
                display: flex;
                justify-content: space-between;
                .btn_left {
                    display: flex;
                }
            }
            .selected {
                margin-top: 15px;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .tables {
                margin-top: 15px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .editStatus,
                .edits {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>
